<template>
	<view class="open-logs">
		<!-- 数据列表 -->
		<scroll-view class="data-list" scroll-y @scrolltolower="loadMore" :style="{ height: '100vh' }">
			<view class="list-header">
				<text class="header-cell cell-time">开门时间</text>
				<text class="header-cell cell-user">开门人</text>
				<text class="header-cell cell-method">开门方式</text>
			</view>
			
			<view class="list-body">
				<view v-if="logsList.length === 0" class="empty-data">
					<image src="/static/images/empty.png" mode="aspectFit"></image>
					<text>暂无开门记录</text>
				</view>
				
				<view v-else class="list-content">
					<view class="list-row" v-for="(item, index) in logsList" :key="index">
						<text class="cell-time">{{ formatDateTime(item.createTime) }}</text>
						<text class="cell-user">{{ item.username || '未知用户' }}</text>
						<text class="cell-method">{{ formatOpenType(item.type) }}</text>
					</view>
				</view>
				
				<!-- 加载更多提示 -->
				<view class="loading-more" v-if="logsList.length > 0">
					<text v-if="loading">加载中...</text>
					<text v-else-if="!hasMore">没有更多数据了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { listOpenlock } from '@/api/lock/openlock';
	
	export default {
		name: 'OpenLogs',
		props: {
			roomId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 20,
				loading: false,
				hasMore: true,
				logsList: []
			};
		},
		watch: {
			// 监听 roomId 变化，重新加载数据
			roomId: {
				handler(newVal) {
					if (newVal) {
						console.log('OpenLogs组件收到新的roomId:', newVal);
						this.pageNum = 1;
						this.hasMore = true;
						this.logsList = [];
						this.getList();
					}
				},
				immediate: true
			}
		},
		methods: {
			// 获取列表数据
			getList() {
				if (this.loading || !this.hasMore) return;
				
				this.loading = true;
				
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					homeId: this.roomId
				};
				
				listOpenlock(params).then(response => {
					if (response.code === 200) {
						const newList = response.rows || [];
						if (this.pageNum === 1) {
							this.logsList = newList;
						} else {
							this.logsList = [...this.logsList, ...newList];
						}
						
						this.hasMore = newList.length === this.pageSize;
					} else {
						uni.showToast({
							title: '获取开门记录失败',
							icon: 'none'
						});
					}
				}).catch(() => {
					uni.showToast({
						title: '获取开门记录失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
					uni.stopPullDownRefresh();
				});
			},
			
			// 加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.pageNum++;
					this.getList();
				}
			},
			
			// 重置并刷新
			refresh() {
				this.pageNum = 1;
				this.hasMore = true;
				this.getList();
			},
			
			// 格式化开门方式
			formatOpenType(type) {
				const typeMap = {
					'1': '密码开门',
					'2': '卡片开门',
				
				};
				return typeMap[type] || '未知方式';
			},
			
			// 格式化日期时间
			formatDateTime(dateTimeStr) {
				if (!dateTimeStr) return '未知';
				
				try {
					const date = new Date(dateTimeStr);
					
					// 检查日期是否有效
					if (isNaN(date.getTime())) return '未知';
					
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					const hour = date.getHours().toString().padStart(2, '0');
					const minute = date.getMinutes().toString().padStart(2, '0');
					const second = date.getSeconds().toString().padStart(2, '0');
					
					return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				} catch (error) {
					console.error('格式化时间错误:', error);
					return '未知';
				}
			}
		}
	}
</script>

<style>
	.open-logs {
		height: 100%;
		background-color: #fff;
	}
	
	.data-list {
		height: 100%;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.list-header {
		display: flex;
		padding: 15px;
		background-color: #f8f9fa;
		border-bottom: 1px solid #ebeef5;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	
	.header-cell {
		flex: 1;
		font-size: 14px;
		font-weight: 500;
		color: #606266;
	}
	
	.list-body {
		min-height: 200px;
	}
	
	.list-content {
		display: flex;
		flex-direction: column;
	}
	
	.list-row {
		display: flex;
		padding: 15px;
		border-bottom: 1px solid #ebeef5;
	}
	
	.list-row:last-child {
		border-bottom: none;
	}
	
	.list-row text {
		flex: 1;
		font-size: 14px;
		color: #606266;
	}
	
	.cell-time {
		flex: 2 !important;
	}
	
	.cell-user {
		flex: 1 !important;
	}
	
	.cell-method {
		flex: 1 !important;
	}
	
	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50px 0;
	}
	
	.empty-data image {
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}
	
	.empty-data text {
		font-size: 14px;
		color: #909399;
	}
	
	.loading-more {
		text-align: center;
		padding: 15px 0;
		color: #909399;
		font-size: 14px;
	}
</style>
